<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 style="height: 100%">
      <!-- 收货地址 -->
      <div class="info clearfix"
           @tap="choose_add()">
        <div class="full"
             v-if="userInfo.address">
          <div class="top clearfix">
            <span class="user-name">{{userInfo.receive_name}}</span>
            <span class="user-tel">{{userInfo.phone}}</span>
            <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                 v-if="ImgBaseUrl"
                 alt
                 class="icon" />
          </div>
          <div class="address">{{userInfo.detail_address + userInfo.address}}</div>
        </div>
        <div class="empty"
             v-else>点击添加收货地址</div>
        <div class="address_line"></div>
      </div>
      <!-- 填写身份证号 -->
      <div class="idCard_box"
           v-if="is_cross_border">
        <div class="tip">该商品为跨境商品，因海关需要，请输入收货人身份证信息</div>
        <div class="inp-bar">
          <div class="card-type">身份证</div>
          <input type="text"
                 class="inp"
                 placeholder="请输入"
                 v-model="idCard"
                 maxlength="20" />
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="goods-list"
           v-if="order_data.data">
        <!-- 单个商品 -->
        <goods-list :shopList="shopList"
                    v-if="shopList.length==1"></goods-list>
        <!-- 多个商品 -->
        <div class="shopcard clearfix"
             v-else>
          <div class="shop-item"
               v-for="(item, index) in shopList"
               :key="index">
            <img :src="imgUrl+item.images"
                 v-if="imgUrl"
                 alt
                 class="img" />
          </div>

          <div class="mark"
               @tap="show_all_goods()">
            共{{order_data.data.length}}件
            <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                 v-if="ImgBaseUrl"
                 alt
                 class="icon" />
          </div>
        </div>
      </div>
      <!-- plus -->
      <div class="plus clearfix"
           v-if="order_data.is_plus==1&&order_data.plus_title">{{order_data.plus_title}}</div>
      <!-- 金银币抵扣以及优惠券 -->
      <div class="deduction">
        <div class="coins-bar"
             v-if="order_data.count_gold>0||order_data.count_silver>0">
          <!-- 金币 -->
          <div class="coin-item"
               v-if="order_data.count_gold>0">
            <div class="top clearfix">
              <div class="title">可使用金币抵扣</div>
              <div class="controller">
                <div class="minus-btn"
                     :disabled="gold_num<=0"
                     @tap.stop="action_coin(1,'-')"></div>

                <input type="number"
                       class="num-inp"
                       v-model="gold_num"
                       placeholder="0" />
                <div class="add-btn"
                     @tap.stop="action_coin(1,'+')"></div>

              </div>
            </div>
            <div class="tips">账户剩余金币{{order_data.user_all_gold}}</div>
          </div>
          <!-- 银币 -->
          <div class="coin-item"
               v-if="order_data.count_silver>0">
            <div class="top clearfix">
              <div class="title">可使用银币抵扣</div>
              <div class="controller">
                <div class="minus-btn"
                     :disabled="silver_num<=0"
                     @tap.stop="action_coin(2,'-')"></div>
                <input type="number"
                       class="num-inp"
                       v-model="silver_num"
                       placeholder="0" />
                <div class="add-btn"
                     @tap.stop="action_coin(2,'+')"></div>
              </div>
            </div>
            <div class="tips">账户剩余银币{{order_data.user_all_silver}}</div>
          </div>
          <div class="coin-item"
               v-if="order_data.user_all_gold>0&&order_data.count_silver>0">
            <div class="top clearfix">
              <div class="title">金币兑换银币</div>
              <div class="controller exchange"
                   @tap="show_coinmodel()">去兑换</div>
            </div>
          </div>
        </div>
        <div class="ticket-bar clearfix"
             @tap="chech_ticket()">
          <div class="ticket-l">优惠券</div>
          <div class="ticket-r">
            <!-- 没有优惠券可用 -->
            <div class="ticket-empty"
                 v-if="ticket.length == 0 || canuse_ticket.length ==0">无可用优惠券</div>
            <!-- 有可用优惠券 -->
            <div class="ticket"
                 v-if="canuse_ticket.length>0&&!selcet_ticket_data.condtion_name">
              {{canuse_ticket.length}}张可用
              <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                   v-if="ImgBaseUrl"
                   class="icon" />
            </div>
            <!-- 已选择优惠券 -->
            <div class="ticket"
                 v-if="selcet_ticket_data.condtion_name">
              满{{selcet_ticket_data.type_min_money}}减{{selcet_ticket_data.type_money}}
              <img :src="ImgBaseUrl+'/mp_3.1.6/确认订单/地址箭头/iOS/Path 7@3x.png'"
                   v-if="ImgBaseUrl"
                   class="icon" />
            </div>
          </div>
        </div>
      </div>
      <!-- 订单信息 -->
      <ul class="order-info clearfix">
        <li class="info-item clearfix">
          <div class="item-l">商品价格</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money"
                 v-if="order_data.count_gold<order_data.all_price&&order_data.count_silver<order_data.all_price">￥{{((order_data.all_price*100-order_data.count_gold*100-order_data.count_silver*100)/100)}}</div>
            <div class="icon-and"
                 v-if="(order_data.count_gold>0||order_data.count_silver>0)&&order_data.all_price>(order_data.count_gold||order_data.count_silver)">+</div>
            <!-- 金币 -->
            <div class="coin"
                 v-if="order_data.count_gold">
              <div class="num">{{order_data.count_gold}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />

            </div>
            <div class="icon-and"
                 v-if="order_data.count_gold&&order_data.count_silver">+</div>
            <!-- 银币 -->
            <div class="coin"
                 v-if="order_data.count_silver">
              <div class="num">{{order_data.count_silver}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
            </div>
          </div>
        </li>
        <li class="info-item clearfix"
            v-if="order_data.plus_price">
          <div class="item-l">PLUS会员优惠</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money">￥{{order_data.plus_price}}</div>
          </div>
        </li>
        <li class="info-item clearfix"
            v-if="gold_num>0">
          <div class="item-l">金币抵扣</div>
          <div class="item-r price">
            <!-- 金币 -->
            <div class="coin">
              <div class="num">{{gold_num}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
            </div>
          </div>
        </li>
        <li class="info-item clearfix"
            v-if="silver_num>0">
          <div class="item-l">银币抵扣</div>
          <div class="item-r price">
            <!-- 银币 -->
            <div class="coin">
              <div class="num">{{silver_num}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
            </div>
          </div>
        </li>
        <li class="info-item clearfix"
            v-if="selcet_ticket_data.type_money">
          <div class="item-l">优惠券抵扣</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money">￥{{selcet_ticket_data.type_money}}</div>
          </div>
        </li>

        <li class="info-item clearfix">
          <div class="item-l">运费</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money">￥{{freight_price}}</div>
          </div>
        </li>
      </ul>
      <!-- 备注 -->
      <div class="remark">
        <div class="tip">备注</div>
        <input type="text"
               name
               id
               class="remark-inp"
               placeholder="请输入"
               v-model="user_remark" />
      </div>
      <div class="page-footer">
      </div>
    </scroll-view>
    <!-- 遮罩 -->
    <div class="mask"
         v-if="ticket_isShow||gold_exchange||show_check||show_all">
      <!-- 选择优惠券 -->
      <div class="mallbox add_radius"
           v-if="ticket_isShow">
        <div class="mall_box">
          <div class="titles">
            <p class="title_t">优惠券列表</p>
            <p class="close"
               @tap="closeMask">×</p>
          </div>
          <scroll-view :scroll-y="true"
                       :style="{'height': '474px'}">
            <ul class="list">
              <li class="ticket"
                  @tap="use_ticket(item)"
                  v-for="(item, index) in canuse_ticket"
                  :key="index">
                <div class="left">
                  <!-- 满减券 -->
                  <div class="center"
                       v-if="item.source!=3">
                    <div class="money">
                      <div class="icon">￥</div>
                      <div class="num">{{item.type_money}}</div>
                    </div>
                    <div class="tip">满{{item.type_min_money}}可用</div>
                  </div>
                  <!-- 特殊券 -->
                  <div class="center special"
                       v-if="item.source==3">体验券</div>
                </div>
                <div class="right">
                  <div class="t-title clearfix">
                    <div class="t-type">[{{item.source_name}}]</div>
                    <div class="t-name">{{item.type_name}}</div>
                  </div>
                  <div class="dec">可在{{item.condtion_name}}使用</div>
                  <div class="timer">{{item.start}}~{{item.end}}</div>
                </div>
                <div class="user-btn">
                  <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_empty@2x.png'"
                       v-if="ImgBaseUrl&&!item.is_selected"
                       alt
                       class="img" />
                  <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_selected@2x.png'"
                       v-if="ImgBaseUrl&&item.is_selected"
                       alt
                       class="img" />
                </div>
              </li>
            </ul>
          </scroll-view>
        </div>
      </div>
      <!-- 金币兑换银币 -->
      <conversion v-if="gold_exchange"
                  @closeMask="closeMask"
                  :count_gold="order_data.user_all_gold"
                  @show_check_model="show_check_model"></conversion>
      <!-- 金银币抵扣验证 -->
      <check v-if="show_check"
             :user_tel="user_tel"
             :model_type="model_type"
             @model_submit="model_submit"
             @closeMask="closeMask"
             :tip_msg="tip_msg"></check>
      <!-- 多商品的列表 -->
      <div class="all-goods"
           v-if="show_all">
        <div class="all-title clearfix">
          <div class="msg">商品清单</div>
          <div class="close-btn"
               @tap="closeMask()">
            <img :src="ImgBaseUrl+'/mp_3.1.6/关闭按钮/iOS/ic_shut@3x.png'"
                 v-if="ImgBaseUrl"
                 alt
                 class="close-icon" />
          </div>
        </div>
        <div class="all-content">
          <scroll-view :scroll-y="true"
                       style="height: 100%">
            <goods-list :shopList="order_data.data"></goods-list>
          </scroll-view>
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <button class="submit-btn"
              @tap="check_form()">提交订单</button>
      <div class="total_bottom">
        <div class="msg">合计:</div>
        <div class="price">
          <span class="money_icon">￥</span>
          <span class="money">{{fixes_price}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import conversion from "@/components/coins/conversion";
import check from "@/components/coins/check";
import goodsList from "@/components/confirm_order/goods_list";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      shopList: [],
      userInfo: {},
      all_price: 0, //初始商品总价（金额-plus优惠-运费）
      freight_price: 0.0, //运费
      ticket: [], //优惠券列表
      canuse_ticket: [], //可点击选择的优惠券
      ticket_id: 0,
      sign_mark: "",
      isHidden: false,
      ticket_isShow: false, //优惠券弹框
      t_ticket_name: "", //优惠券名
      ticket_money: "0.00", //优惠券价格
      ticket_min_money: 0, //优惠券满足金额
      user_create: 0,
      book_inp: "", //备注
      goods_id: 0, //商品id
      good_num: 0, //商品or面膜数量
      good_spec_price_id: 0, //商品组合id
      fixes_price: 0, //计算后总价
      shop_id: "", //购物车json对象
      deduction_credit_status: false,
      is_cross_border: false,
      idCard: "",
      order_data: {},
      // 金银币兑换弹窗
      gold_exchange: false,
      // 校验金银币抵扣
      show_check: false,
      // 金币
      gold_num: 0,
      // 银币
      silver_num: 0,
      // 选择的优惠券
      selcet_ticket_data: {},
      // 验证码的类型 1表示兑换校验
      model_type: 1,
      // 提示语
      tip_msg: "",
      // 验证码
      check_code: "",
      exchange_gold: 0,
      user_remark: "",
      show_all: false,
      user_tel: ""
    };
  },
  onLoad: function (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "确认订单"
    });
    if (options.shop_id) {
      this.shop_id = options.shop_id;
    }
    this.sign_mark = options.sign;
    this.goods_id = options.goods_id;
    this.good_spec_price_id = options.good_spec_price_id;
    this.good_num = options.num;

  },
  onShow () {
    this.userInfo = wx.getStorageSync("address_info");
    if (wx.getStorageSync("user_data")) {
      let user_data = wx.getStorageSync("user_data")
      let tel = user_data.username
      this.user_tel = tel.substr(tel.length - 4)
    }

    if (this.userInfo.id) {
      this.get_freight_price()
    } else {
      this.shop_detail()
    }
  },
  watch: {
    // 金币
    gold_num (newVal, oldVal) {
      if (newVal <= 0 || (newVal + "").startsWith("0")) {
        this.gold_num = "";
      } else {
        // 判断账户的金币是否大于可抵扣金币
        if (this.order_data.user_all_gold > this.order_data.count_gold) {
          // 账户金币大于可抵扣金币  最大值=可抵扣金币
          this.gold_num =
            newVal > this.order_data.count_gold
              ? this.order_data.count_gold
              : newVal;
          let all_p = (this.order_data.all_price * 100 - this.order_data.plus_price * 100) / 100
          this.gold_num = Math.ceil(this.gold_num > all_p ? all_p : this.gold_num)
        } else {
          this.gold_num =
            newVal > this.order_data.user_all_gold
              ? this.order_data.user_all_gold
              : newVal;
        }
      }
      this.reset_ticket();
      this.addtion_price();
      this.$forceUpdate();
    },
    // 银币
    silver_num (newVal, oldVal) {
      if (newVal <= 0 || (newVal + "").startsWith("0")) {
        this.silver_num = "";
      } else {
        // 判断账户的银币是否大于可抵扣银币
        if (this.order_data.user_all_silver > this.order_data.count_silver) {
          // 账户银币大于可抵扣银币  最大值=可抵扣银币
          this.silver_num =
            newVal > this.order_data.count_silver
              ? this.order_data.count_silver
              : newVal;
          let all_p = (this.order_data.all_price * 100 - this.order_data.plus_price * 100) / 100
          this.silver_num = Math.ceil(this.silver_num > all_p ? all_p : this.silver_num)
        } else {
          this.silver_num =
            newVal > this.order_data.user_all_silver
              ? this.order_data.user_all_silver
              : newVal;
        }
      }

      this.reset_ticket();
      this.addtion_price();
      this.$forceUpdate();
    },
    selcet_ticket_data (newVal, oldVal) {
      this.addtion_price();
    }
  },
  methods: {
    //获取商品详情
    shop_detail () {
      let that = this;
      common.mmk_Loading(0);
      let api = "";
      let data = {};
      if (that.sign_mark == 1) {
        //签到领取面膜
        api = "api/v4_5/sign_in/store";
        data = "";
      }
      if (that.sign_mark == 2) {
        //普通商品
        api = "api/v4_5/shop_order/affirm";
        data = { ids: that.shop_id };
      }
      if (that.sign_mark == 3) {
        //换购商品
        api = "api/v4_5/sign/goods_exchange";
        data = { id: that.goods_id };
      }
      if (that.sign_mark == 4) {
        //立即购买
        api = "api/v4_5/shop_order/place";
        data = {
          goods_id: that.goods_id,
          good_spec_price_id: that.good_spec_price_id,
          num: that.good_num
        };
      }
      common.fly_post(api, data, response => {
        common.mmk_Loading(1);
        let res = response.data;
        if (res.status_code == 0) {
          that.order_data = res.data;
          // 商品列表
          {
            let shop_arr = [...res.data.data];
            //购物车是否有跨境商品
            shop_arr.forEach(item => {
              if (item.cross_border == 1) {
                this.is_cross_border = true;
              }
            });
            if (that.sign_mark == 1 || that.sign_mark == 3) {
              that.good_num = res.data.data[0].good_num;
            }
            if (shop_arr.length > 3) {
              this.shopList = shop_arr.splice(0, 3);
            } else {
              this.shopList = shop_arr;
            }
          }

          // 处理优惠券逻辑
          {
            let ticket = res.data.tickets || [];
            if (ticket && ticket.length > 0) {
              ticket.forEach(element => {
                element.start = new Date(element.send_start_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                element.end = new Date(element.send_end_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                let condtion = element.condtion;
                if (condtion == 1) {
                  element.con = "品质医美 ";
                } else if (condtion == 2) {
                  element.con = "商城 ";
                }
                //如果优惠券满足金额>(总价-初始积分) -> true 置灰不可选择
                if (
                  element.type_min_money * 100 >
                  that.all_price * 100 - that.kou_credit * 100
                ) {
                  element.can_active = true;
                  element.is_selected = false; //没选中
                } else {
                  element.can_active = false; //不置灰
                  element.is_selected = false; //没选中
                }
              });
              that.ticket = [...ticket];
            }
          }

          // 初始化金银币
          if (this.order_data.count_gold > this.order_data.count_silver) {
            //   最大可抵扣的金币 > 可抵扣的银币
            if (this.order_data.count_gold > 0) {
              // 银币抵扣之后的价格 - plus 优惠  向上取整 ===>  金币默认抵扣金额

              if (((this.order_data.all_price * 100 - this.order_data.count_gold * 100 - this.order_data.count_silver * 100) / 100) <= 0) {
                // 全金币抵扣
                this.gold_num =
                  Math.ceil(((this.order_data.user_all_gold >= this.order_data.count_gold
                    ? this.order_data.count_gold
                    : this.order_data.user_all_gold) * 100 - this.order_data.plus_price * 100) / 100);
              } else {
                this.gold_num =
                  Math.ceil(this.order_data.user_all_gold >= this.order_data.count_gold
                    ? this.order_data.count_gold
                    : this.order_data.user_all_gold);
              }
              let all_p = (this.order_data.all_price * 100 - this.order_data.plus_price * 100) / 100
              console.log(all_p);

              this.gold_num = Math.ceil(this.gold_num > all_p ? all_p : this.gold_num)


            }
            if (this.order_data.count_silver > 0) {
              // 银币的默认抵扣  在订单可抵扣银币 和 账户剩余银币 中取最小值
              this.silver_num =
                this.order_data.user_all_silver >= this.order_data.count_silver
                  ? this.order_data.count_silver
                  : this.order_data.user_all_silver;
            }

          } else {
            //   最大可抵扣的金币大 < 可抵扣的银币
            if (this.order_data.count_gold > 0) {
              this.gold_num =
                this.order_data.user_all_gold >= this.order_data.count_gold
                  ? this.order_data.count_gold
                  : this.order_data.user_all_gold
            }
            if (this.order_data.count_silver > 0) {
              // 银币可抵扣金额 - plus优惠  ===>  银币默认抵扣
              if (((this.order_data.all_price * 100 - this.order_data.count_gold * 100 - this.order_data.count_silver * 100) / 100) <= 0) {
                this.silver_num =
                  Math.ceil(((this.order_data.user_all_silver >= this.order_data.count_silver
                    ? this.order_data.count_silver
                    : this.order_data.user_all_silver) * 100 - this.order_data.plus_price * 100) / 100);
              } else {
                this.silver_num =
                  Math.ceil(this.order_data.user_all_silver >= this.order_data.count_silver
                    ? this.order_data.count_silver
                    : this.order_data.user_all_silver);
              }
              let all_p = (this.order_data.all_price * 100 - this.order_data.plus_price * 100) / 100
              this.silver_num = Math.ceil(this.silver_num > all_p ? all_p : this.silver_num)
            }
          }

          // 初始化总价
          this.all_price = this.order_data.all_price;
          this.addtion_price();
        } else {
          common.mmk_Loading(1);
          common.mmk_Loading(2, res.message);
          setTimeout(() => {
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          }, 1500);
        }
      });
    },
    //优惠券列表动态更新
    reset_ticket () {
      // 计算可用优惠券的价格
      // 可使用优惠券的价格 = 总价 -（金币 + 银币 + plus会员）
      let useable_price =
        (this.all_price * 100 -
          this.gold_num * 100 -
          this.silver_num * 100 -
          this.order_data.plus_price * 100) /
        100;
      console.log('hjgfjhfgjhgjhg' + useable_price);

      // 如果选中的优惠券可用金额<useable_price  清空已选择的优惠券
      if (this.selcet_ticket_data.type_min_money * 100 < useable_price * 100) {
        this.selcet_ticket_data = {};
      }

      // 更新优惠券列表
      this.canuse_ticket = this.ticket.filter(
        item => item.type_min_money * 100 < useable_price * 100
      );
      this.$forceUpdate()
    },
    //选择优惠券
    chech_ticket () {
      //如果后台返回优惠券列表 >0 时 -> 显示选择优惠券弹窗
      if (this.canuse_ticket.length > 0) {
        this.ticket_isShow = true;
      }
    },
    //清空备注
    clear_inp () {
      this.book_inp = "";
    },
    //使用优惠券
    use_ticket (item) {
      //置灰的优惠券不可点击
      if (item.is_selected) {
        item.is_selected = false;
        this.selcet_ticket_data = {};
        return;
      }
      this.canuse_ticket.forEach(val => {
        val.is_selected = false;
      });
      item.is_selected = true;
      if (item.is_selected) {
        this.selcet_ticket_data = item.is_selected ? item : {};
      }

      this.$forceUpdate();
    },
    //选择收获地址
    choose_add () {
      wx.navigateTo({ url: "/pages/package_mine/address_list/main?status=1" });
    },

    // 请求运费
    get_freight_price () {
      let that = this
      let post_data = {
        address_id: that.userInfo.id,
        num: that.good_num,
        type: that.sign_mark
      }
      if (that.sign_mark == 2) {
        //普通商品
        post_data.ids = that.shop_id
      }
      if (that.sign_mark == 3) {
        //换购商品
        post_data.id = that.goods_id
      }
      if (that.sign_mark == 4) {
        //立即购买
        post_data.goods_id = that.goods_id
      } else {
        post_data.type = 4
      }
      setTimeout(() => {
        common.fly_post("api/v4_5/shop_address/feright", post_data, result => {
          let res = result.data
          if (res.status_code == '0') {
            this.freight_price = res.data.feright_price
            this.shop_detail()
          }
        })
      }, 200);

    },
    //价格合计
    addtion_price () {
      let final_price =
        ((this.all_price * 100 -
          this.gold_num * 100 -
          this.silver_num * 100 -
          this.order_data.plus_price * 100 -
          (this.selcet_ticket_data.type_money
            ? this.selcet_ticket_data.type_money * 100
            : 0)) /
          100).toFixed(2);
      console.log(
        this.all_price,
        this.gold_num,
        this.silver_num,
        this.order_data.plus_price,
        this.selcet_ticket_data.type_money,
        this.freight_price,
        final_price
      );

      // 判断价格是否小于等于0  小鱼等于0  就只展示运费
      this.fixes_price = final_price <= 0 ? this.freight_price : ((final_price * 100 + this.freight_price * 100) / 100);
    },
    //关闭弹窗
    closeMask () {
      this.isHidden = false;
      this.ticket_isShow = false;
      this.gold_exchange = false;
      this.show_check = false;
      this.show_all = false;
    },

    // 展示所有商品
    show_all_goods () {
      this.show_all = true;
    },
    //未获取到openid时冲重新请求登陆接口
    get_info (e) {
      let that = this;
      wx.login({
        success: result => {
          common.fly_post(
            "api/v4_5/minapp/login",
            {
              code: result.code,
              iv: e.mp.detail.iv,
              encryptedData: e.mp.detail.encryptedData,
              avatarUrl: e.mp.detail.userInfo.avatarUrl,
              nickName: e.mp.detail.userInfo.nickName,
              sid: ""
            },
            response => {
              let res = response.data;
              if (res.status_code == 0) {
                wx.setStorageSync("user_token", res.data.token);
                wx.setStorageSync("user_id", res.data.user_id);
                wx.setStorageSync("open_id", res.data.user_jwt);
                console.log(12355, res.data.user.data.role_id);
                wx.setStorageSync("role_id", res.data.user.data.role_id);
                console.log(444444, wx.getStorageSync("role_id"));
                that.url_path = "mine";
              } else {
                common.mmk_Loading(2, res.message);
              }
            }
          );
        },
        fail: () => {
          common.mmk_Loading(2, "登录失败");
        }
      });
    },
    // 跳转PLUS
    to_plus () {
      wx.switchTab({ url: "/pages/plus/main" });
    },
    // 加减金银币
    action_coin (type, action) {
      // type  1:金币  2:银币
      // action  +:加  -：减
      switch (type) {
        case 1:
          action == "+" ? this.gold_num++ : this.gold_num--;
          break;
        case 2:
          action == "+" ? this.silver_num++ : this.silver_num--;
          break;
        default:
          break;
      }
      this.$forceUpdate();
    },
    // 开启金银币兑换弹窗
    show_coinmodel () {
      this.gold_exchange = true;
    },
    // 校验表单
    check_form () {
      let that = this;
      if (!this.userInfo.address) {
        common.mmk_Loading(2, "收货地址不能为空");
      } else if (this.is_cross_border && this.idCard == "") {
        common.mmk_Loading(2, "因海关需要，请填写收货人身份证号");
      } else if (this.gold_num > 0 || this.silver_num > 0) {
        this.show_check_model(2);
      } else {
        this.order_submit();
      }
    },
    // 开启验证码弹框
    show_check_model (type = 2, gold_num) {
      this.show_check = true;
      this.exchange_gold = gold_num - 0;
      this.model_type = type;
    },
    //提交订单
    order_submit () {
      let order_form = {
        address_id: this.userInfo.id, //地址
        ticket_id: this.selcet_ticket_data.id || 0, //优惠券
        user_remark: this.user_remark, //备注
        id_card: this.idCard, //身份证号
        count_gold: this.gold_num || 0,
        count_silver: this.silver_num || 0,
        code: this.check_code,
        remark: this.user_remark,
        good_num: 0
      };
      switch (this.sign_mark - 0) {
        case 1:
          //签到
          order_form.good_num = this.good_num;
          order_form.type = 2;
          break;
        case 2:
          //购物车
          order_form.ids = this.shop_id;
          order_form.type = 1;
          break;
        case 3:
          //换购
          order_form.goods_id = this.goods_id;
          order_form.good_num = this.good_num;
          order_form.type = 3;
          break;
        case 4:
          //立即购买
          order_form.goods_id = this.goods_id;
          order_form.good_num = this.good_num;
          order_form.good_spec_price_id = this.good_spec_price_id;
          order_form.type = 4;

          break;

        default:
          break;
      }
      setTimeout(() => {
        wx.showLoading({
          title: "", //提示的内容,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        common.fly_post("api/v4_5/shop_order/submit", order_form, response => {
          wx.hideLoading();
          let res = response.data;
          if (res.status_code == 0) {
            if (res.data.order_price <= 0) {
              wx.redirectTo({
                url: `/pages/package_mall/mall_pay_success/main?order_price=${
                  res.data.order_price
                  }`
              });
            } else {
              common.wechat_pay(
                res.data.body_title,
                res.data.order_sn,
                res.data.order_price,
                1
              );
            }
          } else {
            common.mmk_Loading(1);
            common.mmk_Loading(2, res.message);
          }
        });
      }, 200);
    },
    // 金银币模态框提交
    model_submit (type, check_code) {
      this.check_code = check_code;
      switch (type) {
        case 1:
          // 兑换金银币
          this.exchange_coin();
          break;
        case 2:
          // 提交订单
          this.order_submit();
          break;

        default:
          break;
      }
    },
    // 金币兑换银币
    exchange_coin () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/user_wallet/exchange",
        { gold_coin: this.exchange_gold },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.showToast({
              title: "兑换成功", //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  that.shop_detail();
                  that.closeMask();
                }, 1000);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    }
  },
  components: { conversion, check, goodsList }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #888;
  background: #f3f4f6;
  overflow: hidden;
  //收货地址
  .info {
    background-color: #fff;
    position: relative;
    padding: 0 16px;
    .full {
      .top {
        font-size: 22px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
        margin-top: 20px;
        position: relative;
        .user-name {
          margin-right: 15px;
        }
        .user-tel {
        }
        .icon {
          width: 8px;
          height: 13px;
          display: block;
          position: absolute;
          right: 0px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .address {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
        margin-top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 16px;
      }
    }
    .empty {
      line-height: 114px;
      text-align: center;
      font-size: 14px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(254, 120, 161, 1);
      font-weight: 700;
    }
    .address_line {
      width: 100%;
      height: 4px;
      background-image: url("https://h5.ameimeika.com/mp_images/jifenshangcheng/dingdanqueren/dizhitiao@2x.png");
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  // 海关验证身份证
  .idCard_box {
    padding: 0px 10px;
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 37px;
    }
    .inp-bar {
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      display: flex;
      .card-type {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 40px;
        padding: 0 16px 0 10px;
      }
      .inp {
        height: 100%;
        flex: 1;
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 40px;
        ::placeholder {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
  // 商品订单列表
  .goods-list {
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .shopcard {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 12px 10px;
      position: relative;
      .shop-item {
        width: 90px;
        height: 90px;
        background: rgba(230, 230, 230, 1);
        border-radius: 6px;
        margin-right: 6px;
        float: left;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 6px;
        }
      }
      .mark {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 17px;
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        .icon {
          width: 5px;
          height: 7px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  // plus
  .plus {
    margin: 0px 10px;
    height: 29px;
    background: rgba(255, 241, 216, 1);
    border-radius: 5px;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(87, 66, 66, 1);
    line-height: 29px;
    text-align: center;
  }
  // 金银币和优惠券抵扣
  .deduction {
    margin: 10px;
    padding: 0px 10px;
    background-color: #fff;
    border-radius: 5px;
    .coins-bar {
      padding: 12px 0px;
      .coin-item {
        margin-top: 20px;
        .top {
          .title {
            float: left;
            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(29, 29, 29, 1);
            line-height: 20px;
          }
          .controller {
            float: right;
            .add-btn,
            .minus-btn {
              margin: 0px;
              padding: 0;
              width: 16px;
              height: 16px;
              border-radius: 4px;
              background: none;
              border: none;
              outline: none;
              display: inline-block;
              vertical-align: middle;
              :disabled {
                opacity: 0.6;
              }
            }
            .add-btn {
              background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.6/%E8%B4%AD%E7%89%A9%E8%BD%A6%E2%80%9C%2B%E2%80%9D%E2%80%98-%E2%80%99%E5%9B%BE%E6%A0%87/%E6%B7%B1%E8%89%B2/%E5%AE%89%E5%8D%93/xxxhdpi/%E7%BC%96%E7%BB%84%2015.png);
              background-repeat: no-repeat;
              background-size: cover;
            }
            .minus-btn {
              background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.6/%E8%B4%AD%E7%89%A9%E8%BD%A6%E2%80%9C%2B%E2%80%9D%E2%80%98-%E2%80%99%E5%9B%BE%E6%A0%87/%E6%B7%B1%E8%89%B2/%E5%AE%89%E5%8D%93/xxxhdpi/%E7%BC%96%E7%BB%84%2015%E5%A4%87%E4%BB%BD.png);
              background-repeat: no-repeat;
              background-size: cover;
            }
            .num-inp {
              width: 40px;
              height: 20px;
              font-size: 14px;
              font-family: "PingFangSC-Medium", "PingFang SC";
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              line-height: 20px;
              display: inline-block;
              vertical-align: middle;
              text-align: center;
            }
            &.exchange {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(255, 115, 164, 1);
              line-height: 20px;
            }
          }
        }
        .tips {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
          margin-top: 6px;
        }
        &:first-of-type {
          margin-top: 0;
        }
      }
    }
    .ticket-bar {
      border-top: 1px solid rgba(242, 242, 242, 1);
      height: 44px;
      .ticket-l {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(29, 29, 29, 1);
        line-height: 44px;
        float: left;
      }
      .ticket-r {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        line-height: 44px;
        float: right;
        display: inline-block;
        vertical-align: middle;
        // 没有优惠券
        .ticket-empty {
          color: rgba(153, 153, 153, 1);
          line-height: 44px;
        }
        .ticket {
          color: rgba(29, 29, 29, 1);
          line-height: 44px;
        }
        .icon {
          width: 6px;
          height: 10px;
          display: inline-block;
          margin-left: 8px;
        }
      }
    }
  }
  // 订单信息
  .order-info {
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    padding: 0 10px 11px 10px;
    .info-item {
      margin-top: 10px;
      .item-l {
        float: left;
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        vertical-align: middle;
        line-height: 28px;
      }
      .item-r {
        float: right;
        display: inline-block;
        vertical-align: middle;
        &.price {
          .money {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            display: inline-block;
            vertical-align: middle;
          }
          .icon-and {
            color: rgba(202, 202, 202, 1);
            font-size: 14px;
            margin: 0px 2px;
            display: inline-block;
            vertical-align: middle;
            font-weight: bold;
          }
          .coin {
            display: inline-block;
            vertical-align: middle;
            .icon {
              width: 12px;
              height: 12px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 2px;
              margin-top: -1px;
            }
            .num {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  // 备注
  .remark {
    margin: 0 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    display: flex;
    padding: 0px 10px;
    // margin-bottom: 60px;
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 40px;
      padding-right: 16px;
    }
    .remark-inp {
      flex: 1;
      height: 40px;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 40px;
      ::placeholder {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 40px;
      }
    }
  }
  // ios的底部
  .page-footer {
    width: 100%;
    height: 60px;
  }
  /* 优惠券 */
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    .mallbox {
      position: absolute;
      width: 100%;
      max-height: 85%;
      box-sizing: border-box;
      background: #fff;
      z-index: 99999;
      color: #444;
      bottom: 0px;
      left: 0;
      .mall_box {
        .title {
          width: 100%;
          text-align: right;
          .close {
            font-size: 20px;
            padding: 12px 0;
          }
        }
        .titles {
          width: 100%;
          overflow: hidden;
          position: relative;
          border-bottom: solid 1px #e0e0e0;
          padding: 8px 0;
          .title_t {
            font-size: 16px;
            text-align: center;
            width: 100%;
            float: left;
            color: #333333;
          }
          .close {
            position: absolute;
            font-size: 34px;
            text-align: right;
            width: 50px;
            right: 13px;
            top: -6px;
            font-weight: 400;
            opacity: 0.7;
          }
        }
        // 选择优惠券
        .list {
          width: 100%;
          padding-top: 10px;
          padding-bottom: 50px;
          .ticket {
            display: flex;
            height: 92px;
            margin: 10px 0;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 8px 0px rgba(164, 178, 193, 0.45);
            overflow: hidden;
            position: relative;
            .left {
              width: 98px;
              height: 100%;
              border-right: 1px dashed rgba(235, 235, 235, 1);
              position: relative;
              .center {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .money {
                  text-align: center;
                  .icon {
                    font-size: 12px;
                    font-family: "STHeitiTC-Medium", "STHeitiTC";
                    font-weight: 500;
                    color: rgba(220, 47, 107, 1);
                    display: inline-block;
                    vertical-align: bottom;
                  }
                  .num {
                    font-size: 26px;
                    font-family: "STHeitiTC-Medium", "STHeitiTC";
                    font-weight: 500;
                    color: rgba(220, 47, 107, 1);
                    line-height: 24px;
                    display: inline-block;
                    vertical-align: bottom;
                  }
                }
                .tip {
                  font-size: 12px;
                  font-family: "PingFangSC-Regular", "PingFang SC";
                  font-weight: 400;
                  color: rgba(235, 118, 158, 1);
                  line-height: 17px;
                  text-align: center;
                  margin-top: 6px;
                }
                &.special {
                  font-size: 18px;
                  font-family: "PingFangSC-Semibold", "PingFang SC";
                  font-weight: 600;
                  color: rgba(220, 47, 107, 1);
                  line-height: 24px;
                  text-align: center;
                }
              }

              &::before {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: block;
                background-color: #fff;
                box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(50%, -50%);
              }
              &::after {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: block;
                background-color: #fff;
                box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
                position: absolute;
                bottom: 0;
                right: 0;
                transform: translate(50%, 50%);
              }
            }
            .right {
              flex: 1;
              padding: 10px;
              box-sizing: border-box;
              position: relative;
              .t-title {
                font-size: 16px;
                font-family: "PingFangSC-Medium", "PingFang SC";
                font-weight: 500;
                line-height: 20px;
                display: flex;
                .t-type {
                  color: rgba(254, 120, 158, 1);
                  vertical-align: middle;
                  display: inline-block;
                }
                .t-name {
                  color: rgba(29, 32, 35, 1);
                  vertical-align: middle;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  flex: 1;
                }
              }
              .dec {
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(63, 69, 75, 1);
                line-height: 16px;
                margin-top: 5px;
              }
              .timer {
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 16px;
                position: absolute;
                left: 10px;
                bottom: 10px;
              }
            }
            .user-btn {
              width: 24px;
              height: 24px;
              position: absolute;
              bottom: 5px;
              right: 7px;
              .img {
                width: 100%;
                height: 100%;
              }
            }
          }
          //   .mask-used {
          //     opacity: 0.5;
          //   }
          .disabled {
            filter: grayscale(1);
          }
        }
        .mallInfo {
          height: 100px;
          display: flex;
          padding-bottom: 10px;
          border-bottom: solid 1px #eeeeee;
          .mallImg {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: inline-block;
          }
          .right {
            width: 60%;
            .mall_row1 {
              height: 24px;
              font-size: 17px;
              color: #f64665;
              margin-top: 19px;
              .rmb_icon {
                width: 12px;
                height: 12px;
              }
              .orange {
                color: #ff7100;
              }
            }
            .mall_row2 {
              font-size: 12px;
              width: 40%;
              margin-bottom: 10px;
              text-decoration: line-through;
              color: #888;
            }
            .mall_row3 {
              font-size: 14px;
              color: #444;
            }
          }
        }
        .dv {
          clear: both;
          height: auto;
          margin-bottom: 30px;
          .mall_choose {
            height: 20px;
            display: inline-block;
            font-size: 14px;
            color: #444;
            margin: 10px;
            clear: both;
          }

          .mall_type {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            clear: both;
            .mall_style {
              float: left;
              width: auto;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              border: 0.5px solid #ccc;
              color: #999;
              margin: 0 10px 10px 0;
              text-align: center;
              padding: 0 10px;
            }
            .active {
              color: #f64665;
              border: 0.5px solid #f64665;
            }
          }
        }

        .mall_choose1 {
          width: 100%;
          height: 20px;
          display: inline-block;
          font-size: 14px;
          color: #444;
          margin: 10px 0;
          text-align: left;
          clear: both;
        }
        .mall_type1 {
          width: 100%;
          height: auto;
          margin-bottom: 10px;
          clear: both;
          .mall_style1 {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            border: 0.5px solid #ccc;
            color: #999;
            margin: 0 10px 10px 0;
            text-align: center;
          }
          .active {
            color: #f64665;
            border: 0.5px solid #f64665;
          }
        }

        .choose {
          height: 28px;
          line-height: 28px;
          clear: both;
          font-size: 14px;
          color: #444;
          margin-bottom: 24px;
          margin-top: 10px;
          position: relative;
          .num {
            width: 105px;
            height: 28px;
            position: absolute;
            right: 0;
            top: -17%;
            line-height: 28px;
            text-align: center;
            .numBtn {
              width: 28px;
              height: 28px;
              font-size: 17px;
              color: #888;
              border: 0.5px solid #ccc;
              display: inline-block;
            }
            .num_mid {
              width: 42px;
              height: 30px;
              font-size: 14px;
              color: #444;
              display: inline-block;
            }
          }
        }
      }

      .comfirmBtn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
        color: #fff;
        background: #ff383e;
      }
    }
    .add_radius {
      border-radius: 10px 10px 0 0;
    }
    // 全部商品
    .all-goods {
      height: 65%;
      width: 100%;
      background: rgba(255, 255, 255, 1);
      border-radius: 15px 15px 0px 0px;
      position: fixed;
      z-index: 9999;
      bottom: 0px;
      left: 0px;
      display: flex;
      flex-direction: column;
      -webkit-overflow-scrolling: touch;
      z-index: 9999;
      .all-title {
        margin: 24px 0 20px;
        .msg {
          font-size: 16px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin-left: 10px;
          float: left;
        }
        .close-btn {
          width: 20px;
          height: 20px;
          float: right;
          margin-right: 16px;
          .close-icon {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
      .all-content {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  // 底部栏
  .bottom-bar {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    line-height: 48px;
    .total_bottom {
      float: right;
      vertical-align: middle;
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: inline-block;
        vertical-align: baseline;
      }
      .price {
        display: inline-block;
        vertical-align: baseline;
        .money_icon {
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 56, 62, 1);
          display: inline-block;
          vertical-align: baseline;
        }
        .money {
          font-size: 20px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          display: inline-block;
          vertical-align: baseline;
        }
      }
    }
    .submit-btn {
      width: 106px;
      height: 38px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 25px;
      font-size: 14px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 38px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      float: right;
      margin: 5px 5px 0 16px;
    }
  }
}
</style>


